<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>{{str}}</h2>
      <!-- 需求：反转字符 -->
      <!-- 计算属性：
               使用场景：依赖一个或者多个值产生一个新的值
               语法：
                 computed:{
                      方法名(){
                        return 新的值
                      }
                 }
                使用 this.方法名
                特点：它产生的值会缓存（依赖的值不改变它是不会执行的，依赖的值改变了，它会立马执行）
    -->
      <h3>{{str.split('').reverse().join('')+'!!!'}}</h3>
      <h3>{{str.split('').reverse().join('')+'!!!'}}</h3>
      <h3>{{str.split('').reverse().join('')+'!!!'}}</h3>
      <h3>{{str.split('').reverse().join('')+'!!!'}}</h3>
      <h3>{{str.split('').reverse().join('')+'!!!'}}</h3>
      <h3>{{str.split('').reverse().join('')+'!!!'}}</h3>
      <hr />
      <h4>{{reStr()}}</h4>
      <h4>{{reStr()}}</h4>
      <h4>{{reStr()}}</h4>
      <h4>{{reStr()}}</h4>
      <h5>{{num}}</h5>
      <button @click="num++">点击++</button>
      <hr />
      <h4>{{strSet}}</h4>
      <h4>{{strSet}}</h4>
      <h4>{{strSet}}</h4>
      <h4>{{strSet}}</h4>
      <button @click="str='123456'">修改str</button>
    </div>
    <script src="./vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          str: 'abcdef',
          num: 1
        },
        computed: {
          strSet () {
            console.log('计算属性执行了')
            return (
              this.str
                .split('')
                .reverse()
                .join('') + '!!!'
            )
          }
        },
        methods: {
          reStr () {
            console.log('methods执行了')
            return (
              this.str
                .split('')
                .reverse()
                .join('') + '!!!'
            )
          }
        }
      })
    </script>
  </body>
</html>
